//选项卡
Vue.component('Tab', {
    template: `<div :id="id" :class="[layer?'layer':'']" :style="{'border':layerBorder}" style="width: 100%;">
    <div style="display:flex; height:40px; line-height:40px; background:#ccc; ">
        <span style="display:block; width:100%; text-align:center; cursor:default;" 
            v-for="(item, index) in data" :style="actived == index?'background:red;':''" 
            @click="toggle(index)">{{item.tab}}</span>
    </div>
    <div class="tab-content" style="min-height: 300px; width:100%; overflow:hidden;">
        <div class="wrapbox" style="transition: all 1s;" :style="{'width':100*data.length+'%'}">
            <div style="float:left; padding: 10px 0;"  
                :style="{'width':100/data.length+'%','background':'#eee'}" v-for="(item, index) in data">
                <slot></slot>
            </div>
        </div>
    </div>
    <i v-show="layer&&SortableSwitch" style="position: absolute;top: 0;left: 0; z-index:999; color:#67C23A;" class="el-icon-rank"></i></div>`,
    mixins: [global],
    data() {
        return {
            actived: 0,
        }
    },
    methods: {
        toggle(index) {
            this.actived = index;
            let id = this.id;
            let num = document.querySelector("#" + id + " .tab-content").offsetWidth;
            document.querySelector("#" + id + " .wrapbox").style.webkitTransform = "translateX(-" + (this.actived * num) + "px)";
        },
    },
})
Vue.component('TabConfig', {
    template: `<el-card style="background-color: white;">
    <div class="table_titel">
        <div class="titel">选项卡组件</div>
        <div class="operation">
            <el-button type="primary" size="small" @click="add">插入组件</el-button>
        </div>
    </div>
    <div><slot></slot></div>
</el-card>`,
    mixins: [globalConfig],
    methods: {
        add() {
            this.$store.commit('setindex', this.id);
        },
    }
})